<template>
    <yh-dialog
        v-bind="$attrs"
        :visible.sync="visibleTemp"
        :title="title"
        :modal="false"
        :close-on-click-modal="false"
        @close="handleCloseDialog"
        width="65vw"
        drag
    >
        <div class="dialog-main transfer">
            <div class="left">
                <div class="ipt">
                    <el-input v-model="filterTextL" placeholder="请输入编号或名称" style="width: calc(100% - 45px)" size="mini"></el-input>
                    <el-button @click="getLeftData" class="btn-p" type="primary" icon="el-icon-search" size="mini"> </el-button>
                </div>
                <RiskTable
                    ref="risk-table-L"
                    :tableConfig="tableConfigL"
                    :tableData="leftData"
                    :column="columns"
                    :paging="pagingL"
                    pageType="pyaxa"
                    v-loading="tableLoading"
                    @page-change="getLeftData"
                    @getAllData="getAllDataL"
                    style="height: calc(100% - 50px); padding: 0 10px"
                >
                </RiskTable>
            </div>
            <div class="btns">
                <div class="btn-group">
                    <el-button @click="moveToRight" size="mini" icon="el-icon-arrow-right"></el-button>
                    <br />
                    <el-button @click="moveToLeft" size="mini" icon="el-icon-arrow-left"></el-button>
                </div>
            </div>
            <div class="right">
                <div class="ipt">
                    <el-input v-model="filterTextR" placeholder="请输入编号或名称" style="width: calc(100% - 45px)" size="mini"></el-input>
                    <el-button @click="getRightData" class="btn-p" type="primary" icon="el-icon-search" size="mini"> </el-button>
                </div>
                <RiskTable
                    ref="risk-table-R"
                    :tableConfig="tableConfigR"
                    :tableData="rightDataProxy"
                    :column="columns"
                    :paging="pagingR"
                    pageType="pyaxa"
                    @page-change="getRightData"
                    @getAllData="getAllDataR"
                    style="height: calc(100% - 50px); padding: 0 10px"
                >
                </RiskTable>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="handleCloseDialog">取 消</el-button>
            <el-button size="mini" type="primary" @click="handleSave">确 定</el-button>
        </div>
    </yh-dialog>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop, PropSync } from 'vue-property-decorator';
import RiskTable from '@/common/components/risk-table-plus.vue';
import { ColumnVO, PageVO, TableConfigVO, VueObject } from '../vo';
import { getCurrentPageData } from '@/utils/tools';

/**
 * 模式1: 左边远端, 右边前端
 * 模式2: 左边前端, 右边前端 (暂未实现)
 */

@Component({ name: 'RiskTransfer', components: { RiskTable } })
export default class RiskTransfer extends Vue {
    @PropSync('visible') syncVisible: boolean;
    @Prop({ default: '编辑明细' }) readonly title?: string;
    @Prop() readonly rightDataSource: any[];

    public visibleTemp: boolean = false;

    pagingL: PageVO = { currentPage: 1, pageSize: 25, total: 0 };
    pagingR: PageVO = { currentPage: 1, pageSize: 25, total: 0 };
    tableLoading: boolean = false;
    tableConfigL: TableConfigVO = {
        rowKey: 'entryCode', // 主键key
        allRowKeys: [], // 所有页数据的key集合
        allRows: [],
    };
    tableConfigR: TableConfigVO = {
        rowKey: 'entryCode', // 主键key
        allRowKeys: [], // 所有页数据的key集合
        allRows: [],
    };
    tableData: any[] = [];
    columns: ColumnVO[] = [
        {
            type: 'checkbox',
            selectedAll: true,
            fixed: 'left',
            align: 'center',
            width: 65,
        },
        {
            title: '条目编号',
            field: 'entryCode',
            width: 100,
        },
        {
            title: '风险说明',
            field: 'entryName',
        },
    ];

    leftData: any[] = [];
    leftDataShow: any[] = [];
    filterTextL: string = '';
    checkedLeft = [];

    rightData: any[] = [];
    rightDataShow: any[] = [];
    filterTextR: string = '';
    checkedRight = [];

    @Watch('visible', { immediate: true, deep: true })
    onWatchVisible(value) {
        if (value !== this.visibleTemp) {
            this.visibleTemp = value;
        }
    }

    mounted() {
        // 父组件有传就用父组件的 没有就自己重新请求
        this.rightData = this.rightDataSource || [];
        this.getRightData();
        this.getLeftData();
    }

    getLeftData(): void {
        this.tableLoading = true;

        this.$axios
            .post('/entry/list/CodeOrName', {
                codeOrName: this.filterTextL,
                filterEntryCode: [...this.rightData.map(i => i.entryCode)],
                premise: false,
                // ltLevel: 'null',
                // groupCode: '',
                paging: this.pagingL,
            })
            .then((res: any) => {
                this.leftData = res.list || [];
                this.pagingL.total = res.total;
            })
            .finally(() => {
                this.tableLoading = false;
            });
    }

    getRightData() {
        this.rightDataShow = this.rightData.filter(i => i.entryCode.indexOf(this.filterTextR) > -1 || i.entryName.indexOf(this.filterTextR) > -1);
        this.pagingR.total = this.rightDataShow.length;
    }

    /**
     * 右边表格分页代理
     */
    get rightDataProxy() {
        return getCurrentPageData(this.rightDataShow, this.pagingR.currentPage, this.pagingR.pageSize);
    }

    /**
     * 左侧移动到右侧
     */
    moveToRight(): void {
        this.checkedLeft = (this.$refs['risk-table-L'] as any).checkedRows;
        if (!this.checkedLeft.length) return;

        this.rightData = [...this.rightData, ...this.checkedLeft];
        this.rightDataShow = this.rightData;
        this.pagingR.total = this.rightDataShow.length;
        this.filterTextR = '';

        (this.$refs['risk-table-L'] as any).resetCheckRowKeys();
        this.getLeftData();
    }

    /**
     * 右侧移动到左侧
     */
    moveToLeft(): void {
        const checkRowKeys = (this.$refs['risk-table-R'] as any).checkRowKeys;
        if (!checkRowKeys.length) return;

        this.rightData = this.rightData.filter(i => !checkRowKeys.includes(i.entryCode));
        this.rightDataShow = this.rightData;
        this.pagingR.total = this.rightDataShow.length;
        this.filterTextR = '';

        (this.$refs['risk-table-R'] as any).resetCheckRowKeys();
        this.getLeftData();
    }

    getAllDataL() {
        this.$axios
            .post('/entry/list/CodeOrName', {
                codeOrName: this.filterTextL,
                filterEntryCode: [...this.rightData.map(i => i.entryCode)],
                premise: false,
                // ltLevel: 'null',
                // groupCode: '',
                paging: { currentPage: 1, pageSize: 888888 },
            })
            .then((res: any) => {
                this.tableConfigL.allRows = res.list;
                this.tableConfigL.allRowKeys = res.list.map(i => i.entryCode);
                (this.$refs['risk-table-L'] as VueObject).handleSelectAll();
            });
    }

    getAllDataR() {
        this.tableConfigR.allRows = this.rightData;
        this.tableConfigR.allRowKeys = this.rightData.map(i => i.entryCode);
        (this.$refs['risk-table-R'] as VueObject).handleSelectAll();
    }

    /**
     * 保存事件
     */
    handleSave(): void {
        // if (!this.verify()) return;
        this.$emit('submit', this.rightData);
    }

    /**
     * 关闭dialog事件
     */
    handleCloseDialog(): void {
        this.syncVisible = false;
    }
}
</script>
<style lang="scss" scoped>
.transfer {
    display: flex;

    .left {
        width: calc(50% - 25px);
        border: 1px solid #e5e5e5;
        border-radius: 3px;
        height: 60vh;

        .tree {
            width: 50%;
            overflow: auto;
            padding: 0 10px;
            border-right: 1px solid #e5e5e5;
        }

        .list {
            width: 50%;
            height: 100%;
        }

        .content {
            display: flex;
            height: calc(100% - 78px);
        }
    }

    .right {
        width: calc(50% - 25px);
        border: 1px solid #e5e5e5;
        border-radius: 3px;
        height: 60vh;
    }

    .btns {
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        .el-button {
            border-radius: 5px;
            padding: 7px;
            margin: 5px 0;
        }
    }

    .title {
        background: #f9f9f9;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
    }

    .ipt {
        padding: 10px;
        position: relative;

        .btn-p {
            position: absolute;
            right: 10px;
            padding: 6px 16px !important;
            // .el-icon-search {
            //     color: #fff;
            // }
        }
    }

    .list {
        height: calc(100% - 78px);
        padding: 0 10px;
        overflow: auto;

        .el-checkbox {
            display: block;
            margin: 0;
            height: 26px;
            line-height: 26px;
            padding-left: 5px;
        }

        .el-checkbox:hover {
            background: #fbf5eb;
        }
    }
}

/deep/ .el-dialog__body {
    overflow: hidden;
    max-height: unset;
}
</style>
